<!-- 主页面组件 -->
<template>
    <div class="home">
        <n-icon :component="CaretLeft" id="arrow-left" size="30" color="white"></n-icon>
        <display-panel @toggle-settings="toggleSettings" @dblclick="isSettingsVisible = true" />
        <settings-panel v-model:isVisible="isSettingsVisible" />
    </div>
</template>

<script lang="ts" setup>
// MARK: import
import { ref } from 'vue';
import { CaretLeft } from '@vicons/carbon';
import DisplayPanel from '@/cmpts/custom/DisplayPanel.vue';
import SettingsPanel from '@/cmpts/custom/SettingsPanel.vue';

// MARK: params
const isSettingsVisible = ref(false);

// MARK: func
const toggleSettings = () => {
    isSettingsVisible.value = !isSettingsVisible.value;
};
</script>

<style lang="scss" scoped>
.home {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#arrow-left {
    z-index: 100;
    position: fixed;
    top: 50%;
    left: 3px;
    font-size: 20px;
    transform: translateY(-50%);
    animation: arrow-left-animation 1s infinite;
}

@keyframes arrow-left-animation {
    0% {
        transform: translateX(20%);
    }
    50% {
        transform: translateX(-20%);
    }
    100% {
        transform: translateX(20%);
    }
}
</style>
